<template>
    <div>
        <v-header :title="title">
            <span slot="left" class="backs_icon"></span>
        </v-header>
        <div class="main_allScroll" :style="{top: interactive.statusBarHeight.height,background: '#F0F4F7'}">
            <scroller ref="myscrollerNotice" :on-refresh="refresh" :on-infinite="loadMore ? load : getDone">
                <div class="order" v-for="(v, i) in list" :key="i">
                    <h5>{{v.pushTime}}</h5>
                    <div class="detail"
                         :class="v.subType == 10103 ||v.subType == 10104 ||v.subType == 10105 ||v.subType == 10106 ||v.subType == 10107 ||v.subType == 10108 || v.subType == 20102 || v.subType == 20104 || v.subType == 20105 || v.subType == 20106 || v.subType == 20107 || v.subType == 20108 || v.subType == 20109 || v.subType == 20111 || v.subType == 30200 || v.subType == 30202 || v.subType == 30203 || v.subType == 30205 || v.subType == 30206 ? 'detail' : 'fail'">
                        <h6>{{v.title}}</h6>
                        <div class="content"
                             v-if="v.subType == 10103 || v.subType == 10104 || v.subType == 10105 || v.subType == 10106"
                             @click="$router.push('/my/shop')">
                            <!--10103开店（配额）10104关店（配额）10105开仓（配额）10106关仓（配额）-->
                            <ul>
                                <li class="subtitle">{{v.content}}</li>
                                <li><span>开始时间：</span>{{v.extraParams.startTime}}</li>
                                <li v-if="v.subType == 10104 || v.subType == 10106"><span>开业持续时间：</span>{{v.extraParams.durationTime}}
                                </li>
                                <li v-if="v.subType == 10103 || v.subType == 10105"><span>最大租期：</span>{{v.extraParams.maxLease}}
                                </li>
                                <li><span>仓库状态：</span>{{v.extraParams.status == '00' ? '已开业': v.extraParams.status ==
                                    '04' ? '结算中': ''}}
                                </li>
                                <li v-if="v.subType == 10104 || v.subType == 10106"><span>开店收益：</span>{{v.extraParams.profit}}元
                                </li>
                                <li v-if="v.subType == 10103 || v.subType == 10105"><span>配额：</span>{{v.bigExtraParams.orderAmount}}元
                                </li>
                            </ul>
                        </div>
                        <div class="content" v-if="v.subType == 10107">  <!--配额支付提醒-->
                            <ul>
                                <li class="subtitle">{{v.content}}</li>
                                <li>{{v.bigExtraParams.goodsName}}</li>
                            </ul>
                        </div>
                        <div class="content" v-if="v.subType == 10108 || v.subType == 10109 || v.subType == 101110 || v.subType == 101119 || v.subType == 101120 || v.subType == 20113 || v.subType == 101121 || v.subType == 101122 || v.subType == 101123 || v.subType == 101124">
                            <!--无扩展-->    <!--10108配额支付超时10109续费101110租期已满   101121 管理平台指定用户发送消息 TODO 可能以后会改加详细 101119 商家审核成功 101120 商家审核失败 20113 商家付款成功 -->
                            <ul>
                                <li class="subtitle">{{v.content}}</li>
                            </ul>
                        </div>
                        <div class="content" v-if="v.subType == 20102 || v.subType == 20104 || v.subType == 20105"
                             @click="$router.push('/my/wallet')">
                            <!--20102付款成功20104收款成功20105收钱成功  todo   -->
                            <ul>
                                <li class="subtitle">{{v.content}}</li>
                                <li><span>转账人：</span>{{v.extraParams.transferAccounts}}</li>
                                <li class="is_red"><span>转账金额：</span>{{v.extraParams.transferAmount}}元</li>
                                <li><span>到账时间：</span>{{v.extraParams.transferTime}}</li>
                            </ul>
                        </div>
                        <div class="content" v-if="v.subType == 20106 || v.subType == 20107">
                            <!--20106提成到账20107红包到账 todo   -->
                            <ul @click="v.subType == 20107 ? $router.push('/my/red_packets') : $router.push('/my/profit')">
                                <li class="subtitle">{{v.content}}</li>
                                <li><span>商品名称：</span>{{v.extraParams.profitGoods}}</li>
                                <li class="is_red"><span>到帐金额：</span>{{v.extraParams.profitAmount}}元</li>
                                <li><span>到账时间：</span>{{v.extraParams.profitTime}}</li>
                            </ul>
                        </div>
                        <div class="content"
                             v-if="v.subType == 20108 || v.subType == 20109 || v.subType == 20110 || v.subType == 20111 || v.subType == 20112"
                             @click="$router.push('/my/wallet')">
                            <!--20108提现到账20109线下充值成功20110线下充值失败 20111线下提现成功 20112线下提现失败 todo   -->
                            <ul>
                                <li class="subtitle">{{v.content}}</li>
                                <li v-if="v.subType == 20108 || v.subType == 20109 || v.subType == 20111">
                                    <span>到账时间：</span>{{v.extraParams.transferTime}}
                                </li>
                                <li class="is_red">
                                    <span> {{v.subType == 20109 || v.subType == 20110 ? '充值' : '提现'}}金额：</span>{{v.extraParams.transferAmount}}元
                                </li>
                                <li v-if="v.subType == 20110 || v.subType == 20112"><span>失败原因：</span>{{v.extraParams.transferDetail}}
                                </li>
                            </ul>
                        </div>
                        <div class="content" v-if="v.subType == 50101 || v.subType == 101112 || v.subType == 101113 || v.subType == 101114 || v.subType == 101115 || v.subType == 101116 || v.subType == 101117">
                            <!-- 系统消息 10201 线下修改支付密码101112   101114 线下修改身份证-->
                            <ul>
                                <li class="subtitle" style="-webkit-line-clamp: 100">{{v.content}}</li>
                                <li v-if="v.subType == 101115 || v.subType == 101116 || v.subType == 101117"><span>失败原因：</span>{{v.extraParams.refuseReason}}
                                </li>
                            </ul>
                        </div>
                        <div class="content" @click="$router.push('/order/detail?orderId=' + v.orderId + '&orderInfo=' + v.bigExtraParams.esOrderId)"
                             v-if="v.subType == 30200 || v.subType == 30201 || v.subType == 30202 || v.subType == 30203 || v.subType == 30204 || v.subType == 30205 || v.subType == 30206 || v.subType == 30207 || v.subType == 30208 || v.subType == 30209 || v.subType == 30207">
                            <!--30200拼单成功 30201拼单失败 30202商品发货 30203订单签收 30204订单退款成功30205延长收货提醒30206延长退货提醒 30207提醒用户输入物流单号30208拒绝售后申请30209换货申请通过30207用户退货地址-->
                            <ul>
                                <li class="subtitle">{{v.content}}</li>
                                <!--<li v-if="v.subType == 30200"><span>所有拼单人姓名：</span>{{v.extraParams.acquireUserNames}}</li>-->
                                <li v-if="v.subType == 30202 || v.subType == 30203"><span>物流公司：</span>{{v.extraParams.deliveryCompany}}</li>
                                <li v-if="v.subType == 30202 || v.subType == 30203"><span>物流单号：</span>{{v.extraParams.deliveryId}}</li>
                                <li v-if="v.subType == 30207"><span>收货人姓名：</span>{{v.extraParams.sendBackRecipients}}</li>
                                <li v-if="v.subType == 30207"><span>收货人电话：</span>{{v.extraParams.sendBackMobile}}</li>
                                <li v-if="v.subType == 30207"><span>收货人地址：</span>{{v.extraParams.sendBackAddress}}</li>
                                <li v-if="v.subType == 30208 || v.subType == 30209"><span>订单编号：</span>{{v.bigExtraParams.orderId}}</li>
                                <li><span>商品名称：</span>{{v.bigExtraParams.goodsName}}</li>
                                <li v-if="v.subType == 30201 || v.subType == 30204"><span>退款时间：</span>{{v.extraParams.refundTime}}
                                </li>
                                <li v-if="v.subType == 30208"><span>拒绝原因：</span>{{v.extraParams.refuseReason}}</li>
                                <li v-if="v.subType == 30209"><span>换货时间：</span>{{v.extraParams.exchangeTime}}</li>
                                <li v-if="v.subType == 30201 "><span>退款金额：</span>{{v.bigExtraParams.orderAmount}}元</li>
                                <li v-if="v.subType == 30205 || v.subType == 30206"><span>剩余可延长次数：</span>{{v.bigExtraParams.orderAmount}}次
                                </li>
                            </ul>
                            <div class="img" v-if="v.subType == 30200 || v.subType == 30202 || v.subType == 30203 || v.subType == 30205 || v.subType == 30206 || v.subType == 30207"><img
                                    v-lazy="{src:v.bigExtraParams.url}" alt=""></div>
                        </div>
                    </div>
                </div>
                <load-more v-show="!loadMore" :show-loading="false" tip='我是有底线的' background-color="#fbf9fe"></load-more>
            </scroller>
        </div>
    </div>
</template>
<script>
    import {LoadMore} from 'vux'
    import {mapState} from 'vuex'

    export default {
        name: 'notice',
        components: {LoadMore},
        data: function () {
            return {
                list: [],
                title: '',
                pageSize: 15,
                pageNum: 1,
                loadMore: false
            }
        },
        activated: function () {
            this.title = this.$route.query.title || '消息通知';
            this.pageNum = 1;
            this.list = []
            this.loadMore = false
            this.getList()
        },
        methods: {
            getList(callback) {
                this.$ajax.inFo.getNews({
                    userId: this.user.userId,
                    type: this.$route.query.type,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    pushTarget: this.comJS.isAndroid() ? 'android' : 'ios'
                })
                    .then(res => {
                        if (callback) {
                            callback()
                        }
                        let arr = [];
                        if (this.pageNum != 1) {
                            arr = this.list
                        }
                        if (res.body.content.list) {
                            res.body.content.list.forEach((v) => {
                                let jsonObj = JSON.parse(v.extraParams)
                                v.bigExtraParams = jsonObj   //  第一层  extraParams
                                v.subType = jsonObj.subType
                                if (jsonObj.hasOwnProperty('extraParams')) {
                                    console.log(jsonObj.extraParams)
                                    v.extraParams = JSON.parse(jsonObj.extraParams)    //  第二层  extraParams
                                    console.log(v.extraParams)
                                    // console.log(v.extraParams.deliveryCompany)
                                }
                                arr.push(v);
                            })
                        }
                        this.list = arr;
                        if (res.body.content.list) {
                            if (res.body.content.list.length < this.pageSize) {
                                this.loadMore = false
                            } else {
                                this.loadMore = true
                                this.pageNum++
                            }
                        }
                        console.log(this.list)
                    })
            },
            refresh(done) {
                this.pageNum = 1;
                global.myLoad = true;
                this.getList(done)
            },
            //  下拉加载
            load(done) {
                global.myLoad = true;
                this.loadMore = false;
                this.getList(done)
            },
            getDone(done) {
                setTimeout(() => this.$refs.myscrollerNotice.finishInfinite(2), 50)
            }
        },
        computed: mapState({user: state => state.user, interactive: state => state.interactive})
    }
</script>
<style lang="less" scoped>
    .back_icon {
        font-size: 24px;
        color: #fff;
    }

    .order {
        padding: 0 0.24rem;
        h5 {
            height: 1rem;
            text-align: center;
            font-size: 0.26rem;
            color: #909090;
            line-height: 1rem;
            font-weight: normal;
        }
        .detail {
            height: auto;
            background: #fff;
            border-radius: 0.04rem;
            padding: 0.38rem 0.24rem 0.58rem 0.3rem;
            &.fail {
                h6 {
                    color: #D4292D;
                }
            }
            h6 {
                font-size: 0.34rem;
                color: #00B300;
                margin-bottom: 0.4rem;
            }
            .content {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                width: 100%;
                /*width:7rem;*/
                .img {
                    width: 1.78rem;
                    height: 1.78rem;
                    overflow: hidden;
                    background-color: #333;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                ul {
                    flex: 1;
                    /*width: calc(100% - 3rem);*/
                    /*width:4.6rem;*/
                    li {
                        font-size: 0.26rem;
                        line-height: 0.36rem;
                        margin-bottom: 0.1rem;
                        overflow: hidden;
                        display: -webkit-box;
                        /*! autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */
                        -webkit-line-clamp: 2;
                        color: #666666;
                        padding-right: 0.4rem;
                        span {
                            color: #333;
                            margin-right: 0.12rem;
                        }
                        &.is_red {
                            color: #D4292D;
                        }
                        &:last-of-type {
                            margin-bottom: 0;
                        }
                        &.subtitle {
                            font-size: 0.28rem;
                            line-height: 0.34rem;
                            margin-bottom: 0.42rem;
                            color: #333;
                            -webkit-line-clamp: initial;
                            overflow: auto;
                        }
                    }
                }
            }
        }
    }
</style>